<template>
    <div class="execution">
        <basic-container>
            <avue-crud
                    ref="crud"
                    :page.sync="page"
                    :data="tableData"
                    :permission="permissionList"
                    :table-loading="tableLoading"
                    :option="tableOption"
                    @on-load="getList"
                    @row-update="handleUpdate"
                    @row-save="handleSave"
                    @search-change="searchChange"
                    @size-change="sizeChange"
                    @current-change="currentChange"
                    @row-del="rowDel"
                    @row-dblclick="handleRowDBLClick"
                    :span-method="spanMethod"
                    @refresh-change="refreshChange"
                    :row-style="rowStyle">
                <template slot="type" slot-scope="scope" >
                    <template v-if="scope.row.tree">
                        <el-button
                                type="text"
                                @click="handleType(scope.row,scope.index)">{{scope.row.type}}
                        </el-button>
                    </template>
                    <template v-else>
                        {{scope.row.type}}
                    </template>
                </template>
            </avue-crud>
        </basic-container>
        <el-dialog
                :visible.sync="dialogTree"
                title="属性字典项"
                width="90%"
                @close="dialogTree = false">
            <avue-crud
                    ref="crudItem"
                    :data="treeDict"
                    :permission="permissionList"
                    :option="dictTreeOption"
                    @row-del="handleRowDel"
                    @row-dblclick="handleRowDBLClick"
                    @row-update="handleUpdate2"
                    @row-save="handleSave2"
            >
                <template slot-scope="{type,size,row}" slot="menu">
                    <el-button icon="el-icon-plus" :size="size" :type="type" @click="openTreeDialog(row)">添加</el-button>
                </template>
            </avue-crud>
        </el-dialog>

        <el-dialog
                title="添加" :visible.sync="treeAddDialog" width="50%">
            <span>
                <el-form ref="addTreeForm" :model="addTreeForm" label-width="80px">
                    <el-form-item label="父ID">
                     <el-select v-model="addTreeForm.parentId" filterable placeholder="请选择" style="width:100%">
                            <el-option v-for="item in parentIds"
                                       :key="item.value"
                                       :label="item.label"
                                       :value="item.value">
                            </el-option>
                     </el-select>
                 </el-form-item>
                     <el-form-item label="类型" >
                     <el-input v-model="addTreeForm.type"    disabled ></el-input>
                 </el-form-item >
                 <el-form-item label="关键字" :rules="[{ required: true, message: '必须输入！', trigger: 'blur' }]" >
                     <el-input v-model="addTreeForm.key"    clearable ></el-input>
                 </el-form-item >
                    <el-form-item label="字典值" :rules="[{ required: true, message: '必须输入！', trigger: 'blur' }]" >
                     <el-input v-model="addTreeForm.value"    clearable type="textarea"
                               :rows="3"></el-input>
                 </el-form-item>
                     <el-form-item label="描述">
                     <el-input v-model="addTreeForm.description"    clearable type="textarea"
                               :rows="3"></el-input>
                 </el-form-item>
                     <el-form-item label="排序">
                     <el-input v-model.number="addTreeForm.sort" ></el-input>
                 </el-form-item>
                     <el-form-item label="备注">
                     <el-input v-model="addTreeForm.remark"    clearable></el-input>
                 </el-form-item>
             </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
            <el-button @click="treeAddDialog = false">取 消</el-button>
            <el-button type="primary" @click="handleSave2">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
import {addObj, delObj, fetchList, putObj, fetchTreeList, getParentIdsByType} from '@/api/admin/dict'
import {tableOption, dictTreeOption} from '@/const/crud/admin/dict'
import {mapGetters} from 'vuex'

export default {
    name: 'Dict',
    data() {
        return {
            searchForm: {},
            form: {
                type: undefined,
                dictId: undefined
            },
            dictType: undefined,
            dictId: undefined,
            dialogFormVisible: false,
            tableData: [],
            tableDictItemData: [],
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20 // 每页显示多少条
            },
            itemPage: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20 // 每页显示多少条
            },
            tableLoading: false,
            tableOption: tableOption,
            spanArr:[],
            key:'type',

            dialogTree: false,
            treeDict: [],
            dictTreeOption: dictTreeOption,

            treeAddDialog: false,
            addTreeForm: {
                type: '',
                key: '',
                value: '',
                description: '',
                sort: 0,
                parentId: '',
                remark: ''
            },
            parentIds: [],
        }
    },
    computed: {
        ...mapGetters(['permissions']),
        permissionList() {
            return {
                addBtn: this.vaildData(this.permissions.sys_dict_add, true),
                delBtn: this.vaildData(this.permissions.sys_dict_del, true),
                editBtn: this.vaildData(this.permissions.sys_dict_edit, true)
            }
        }
    },
    created() {

    },
    methods: {
        //======字典表格相关=====
        getList(page, params) {
            this.tableLoading = true
            fetchList(Object.assign({
                p: page.currentPage,
                ps: page.pageSize
            }, params, this.searchForm)).then(response => {
                this.tableData = response.data.data.records
                this.page.total = response.data.data.total
                this.tableLoading = false;
                this.rowspan()
            })
        },
        rowDel: function (row) {
            this.$confirm('是否确认删除数据类型为"' + row.type + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                return delObj(row)
            }).then(() => {
                this.getList(this.page)
                this.$message.success('删除成功')
            }).catch(function () {
            })
        },
        handleUpdate: function (row, index, done) {
            putObj(row).then(() => {
                this.$message.success('修改成功')
                this.getList(this.page)
                done()
            })
        },
        handleSave: function (row, done) {
            addObj(row).then(() => {
                this.$message.success('添加成功')
                this.getList(this.page)
                done()
            })
        },
        searchChange(form, done) {
            this.searchForm = form
            if (form.type2) {
                this.searchForm.type = form.type2
                form.type = form.type2
            }
            this.page.currentPage = 1
            this.getList(this.page, form)
            done()
        },
        sizeChange(pageSize) {
            this.page.pageSize = pageSize
        },
        currentChange(current) {
            this.page.currentPage = current
        },
        refreshChange(){
            // 刷新还是有些问题的 TODO
            this.getList(this.page, {})
        },
        // 双击编辑
        handleRowDBLClick (row, event) {
            this.$refs.crud.rowEdit(row,row.$index);
        },
        // 行样式
        rowStyle({row,column,rowIndex}){
            if(row.tree){
                return {
                    backgroundColor:'#FFFFF0',
                    color:'#000000'
                }
            }
        },
        // 列合并
        rowspan() {
            this.spanArr=[];
            this.position=0;
            this.tableData.forEach((item,index)=>{
                if(index===0){
                    this.spanArr.push(1)
                    this.position=0;
                }else{
                    if(this.tableData[index][this.key]===this.tableData[index-1][this.key]){
                        this.spanArr[this.position] +=1;
                        this.spanArr.push(0)
                    }else{
                        this.spanArr.push(1)
                        this.position=index
                    }
                }
            })
        },
        spanMethod({ row, column, rowIndex, columnIndex }) {
            if(column.property==[this.key]){
                const _row=this.spanArr[rowIndex];
                const _col=_row>0?1:0;
                return {
                    rowspan:_row,
                    colspan:_col
                }
            }

        },

        // ========== 树形菜单
        handleType(row) {
            this.dialogTree = true
            fetchTreeList(Object.assign({type: row.type})).then(response => {
                this.treeDict = response.data.data
            })
        },
        handleRowDel: function (row) {
            this.$confirm('是否确认删除数据类型为"' + row.type + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(function () {
                return delObj(row)
            }).then(() => {
                this.getList(this.page)
                this.handleType(row)
                this.$message.success('删除成功')
            }).catch(function () {
            })
        },
        handleUpdate2: function (row, index, done) {
            putObj(row).then(() => {
                this.$message.success('修改成功')
                this.handleType(row)
                this.getList(this.page)
                done()
            })
        },
        handleSave2: function () {
            addObj(this.addTreeForm).then(() => {
                this.$message.success('添加成功')
                this.handleType(this.addTreeForm)
                this.getList(this.page)
                this.treeAddDialog = false;
            })
        },
        openTreeDialog: function (row) {
            getParentIdsByType(row.type).then((res) => {
                this.parentIds = res.data.data
            })
            this.addTreeForm.key = '';
            this.addTreeForm.value = '';
            this.addTreeForm.description = '';
            this.addTreeForm.remark = '';
            this.addTreeForm.parentId = row.id;
            this.addTreeForm.sort = 0;
            this.addTreeForm.type = row.type;
            this.treeAddDialog = true;
        }
    }
}
</script>
<style lang="scss" scoped>
</style>

